<template>
    <div id="loginBg">
      <el-row type="flex" class="row-bg" align="middle" justify="center">
        <el-col :span="6">
          <div class="form">

            <el-form :model="user" :rules="rules" ref="user" class="demo-ruleForm">
              <el-row type="flex" class="row-bg">
                <el-col :span="24" >
                  <div class="title">
                      课程管理系统
                  </div>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="18" :offset="3">
                  <div>
                    <el-form-item prop="username">
                      <el-input v-model="user.username" placeholder="请输入学号/工号/用户名">
                        <template slot="prepend">
                          <i class="el-icon-user-solid"></i>
                        </template>
                      </el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="18" :offset="3">
                  <div>
                    <el-form-item prop="password">
                      <el-input v-model="user.password" show-password placeholder="请输入密码">
                        <template slot="prepend">
                          <i class="el-icon-lock"></i>
                        </template>
                      </el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="18" :offset="3">
                  <div>
                    <el-form-item prop="type">
                      <el-radio-group v-model="user.type">
                        <el-radio v-model="user.type" style="color: white" label="0">学生</el-radio>
                        <el-radio v-model="user.type" style="color: white" label="1">老师</el-radio>
                        <el-radio v-model="user.type" style="color: white" label="2">管理员</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row type="flex" class="row-bg">
                <el-col :span="18" :offset="3">
                  <div>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm('user')">登录</el-button>
                      <el-button @click="resetForm('user')">重置</el-button>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
            </el-form>

          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import {get,post} from "../common/request";
  import jwt_decode from "jwt-decode";

    export default {
        name: "Login",
        data(){
          return{
            user:{
              username:"11010001",
              password:"123456",
              type:"1"
            },
            rules: {
              username: [
                {required: true, message: '请输入学号/工号/用户名', trigger: 'blur'},
                {min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur'}
              ],
              password: [
                {required: true, message: '请输入密码', trigger: 'blur'},
                {min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur'}
              ]
            }
          }
        },
        methods:{
          submitForm(user) {
            this.$refs[user].validate((valid) => {
              if (valid) {
                //获取数据，x为后台的原始数据，使用的是封装过后的axios
                post("/login",this.user).then(x=>{

                  if (x.code==1){
                    var token = jwt_decode(x.data);
                    console.log(token);
                    var user={
                      username:token.sub,
                      type:token.type
                    };
                    console.log(user);

                    this.$store.dispatch('asyncUpdateUser', user);
                    this.$store.dispatch('asyncUpdateToken', x.data);

                    // this.$store.commit('updateToken', x.data);

                    // console.log(this.$store.getters.getToken);
                    // sessionStorage.setItem('state', JSON.stringify(this.$store.state));
                    // sessionStorage.setItem('token', this.$store.state.str);
                    this.$notify({
                      title: '成功',
                      message: '登录成功,稍后进入首页',
                      type: 'success',
                      duration:2000
                    });
                    setTimeout(()=>this.$router.push("/Main"),1500);
                  }else {
                    this.$notify.error({
                      title: '错误',
                      message: '用户名或密码有误',
                      duration:2000
                    });
                  }
                });

              } else {
                this.$notify.error({
                  title: '错误',
                  message: '用户名或密码有误',
                  duration:2000
                });
                return false;
              }
            });
          },
          resetForm(user) {
            this.$refs[user].resetFields();
          }
        }
    }
</script>

<style scoped>
#loginBg{
  background-image: url("../assets/login-background.jpg");
  height: 100%;
  width: 100%;
  background-size: 100%;
}

.form{

  background-color: rgba(0, 0, 0, 0.6);
  margin-top: 220px;
  color: white;
  border-radius: 10px;
}

.title{
  font-size: 24px;
  color: white;
  border-bottom: 1px solid white;
  padding: 10px 0px 10px 0px;
  margin-bottom: 10px;
}
</style>
